
<template>
  <div class="listCard flex1" v-infinite-scroll='load' :infinite-scroll-distance='300' :infinite-scroll-disabled='disabled' :infinite-scroll-immediate='false'>
    <div class="cardItem" v-for="v in listCardData" :key="v.id" @click="itemCardClick(v.id)">
      <img :src="`${v.picUrl|| v.coverImgUrl}?param=400y400` " alt="">
      <p class="title txt1">{{v.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'listCard',

  props: {
    listCardData: {
      type: Array,
      default() {
        return []
      }
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      disabled: true
    }
  },
  methods: {
    itemCardClick(id) {
      this.$emit('clickListCardItem', id)
    },
    load() {
      console.log('bottomload')
      this.$emit('bottomLoad')
      this.disabled = true
    }
  },
  watch: {
    listCardData(list) {
      if (this.isLoad) {
        if (list.length) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      }
    }
  }
}
</script>

<style scoped>
.listCard {
  margin: 10px 0;
  flex-wrap: wrap;
}
.cardItem {
  margin: 0 2% 20px 0;
  width: 18%;
  min-height: 82px;
  cursor: pointer;
}
.cardItem img {
  width: 100%;
  border-radius: 10px;
}
.title {
  margin-top: 8px;
  padding: 0 2px;
  font-size: 12px;
  color: #000;
}
</style>